<template>
    <div class="container">
        <child :count="count" :name="name" :fn="parant" :changeIndex="changeIndex" title="小米 su7" price="1999" typeColor="璀璨洋红"
            @updateName="(data) => name = data" />
    </div>
</template>
<script setup>
import child from './components/child.vue'
import { ref, provide, useAttrs } from 'vue'
const count = ref(1);
const name = ref('小米手机');
const parant = () => {
    console.log('我是函数在父组件');
    count.value++
};
// 依赖注入
const color = ref('blue');
provide('color', color);

// 孙子组件调用祖父组件的方法
const changeIndex = (index) => {
    console.log(index);
}
</script>
<style scoped>
.container {
    padding: 10px;
}
</style>